<template>
  <div class="slide-wrap">
    <swiper :options="swiperOption">
      <swiper-slide v-for="(item,index) in slideList" :key="index">
        <img :src="item.url" alt class="fill" />
      </swiper-slide>
      <!-- <div class="swiper-pagination" slot="pagination"></div> -->
      <div class="swiper-button-next swiper-button-white" slot="button-next"></div>
      <div class="swiper-button-prev swiper-button-white" slot="button-prev"></div>
    </swiper>
  </div>
</template>

<script>
export default {
  name: "SlideItem",
  props: {
    slideList: Array
  },
  data() {
    return {
      swiperOption: {
        // autoplay: true,
        direction: "horizontal", // 水平切换选项
        loop: true, // 循环模式选项
        navigation: {
          nextEl: ".swiper-button-next",
          prevEl: ".swiper-button-prev"
        },
        // pagination: {
        //   el: ".swiper-pagination",
        //   clickable: true
        // }
      }
    };
  }
};
</script>
<style lang="scss">
@import "../../../static/styles/mixin.scss";
.swiper-container {
  @include wh(100%, 100%);
}
.swiper-button-prev, .swiper-button-next {
    @include wh(13%,10%);
}
.swiper-button-next.swiper-button-white, .swiper-container-rtl .swiper-button-prev.swiper-button-white{
    width: 15%;
}
.slide-wrap {
  @include wh(100%, 100%);
}
</style>